<!--
 * @Description: 单独做一个穿梭框数据选择插件
 * @Author: 马山
 * @Date: 2020-03-30 15:36:26
 * @LastEditTime: 2020-03-30 12:43:55
 * @LastEditors: 马山
 -->
<!-- 
    1.调用方法：组件.open(params); params:Object //传入参数集
    2.params参数集解释：
    (1).selectOptions 类型Array 下拉选择数据
    // 格式(链式)：
    // [{
    //     label: '一级',
    //     value:"对应值",
    //     children: [{
    //         label: '一级下的第一级1-1',
    //         value:"对应值",
    //         children:[] //链，没有就不传
    //     }]
    // }]
    (2).leftList 类型Array 左侧列表数据
    //格式：
    //[{
    //    id:"11",
    //    label:"插件1",
    //    checked:false //是否选中状态
    //}]
    (3).rightList 类型Array 右侧列表数据
    //格式：
    //{
    //    id:"11",
    //    label:"插件1",
    //    checked:false //是否选中状态
    //}
    (4).title 类型String 弹出框标题 默认值：选择提示
    3.所有触发回调
    (1).getSelectData 选择完下拉数据后的回调。返回值：{label:"文本",value:"值"}
    (2).addData 增加按钮 返回值：当前增加数据集[{id:"11",label:"插件1",checked:false}]
    (3).removeData 移除按钮 返回值：当前删除数据集[{id:"11",label:"插件1",checked:false}]
    (4).submit 点击确定按钮 返回值：已选择的数据集[{id:"11",label:"插件1",checked:false}]
    4.刷新数据
    (1).组件.refreshData(params); params:Object 参数与open一致，不过可根据需求传递参数进行刷新，比如只刷新title,就传 {title:"新标题"}
-->

 <template>
 
 <el-dialog append-to-body :title="title" :visible="isShow" class="" @close="closeDialog" :width="'650px'">

     <div class="selectContent">
         <!-- 左边选择 -->
         <div class="selectLeft">
             <div class="select-drop">
                 <!-- 选择数据来源 -->
                <el-select ref="refSelect" v-model="selectId" @clear="clearHandle" @visible-change="visibleChange">
                    <el-option :value="selectId" :label="selectTitle" style="height:auto;background-color: transparent;">
                        <el-tree  id="tree-option"
                            ref="selectTree"
                            :accordion="false"
                            :data="selectOptions"
                            :props="defaultProps"
                            :node-key="defaultProps.value"
                            @node-click="handleNodeClick">
                        </el-tree>
                    </el-option>
                </el-select>
             </div>
             <!-- 当前数据源加载出来的当前数据 -->
             <div class="select-dataContent">
                 <div
                 v-for="item in leftList" 
                 :key="item.id"
                 @click="item.checked = !item.checked"
                 @dblclick="addDblclick(item)"
                 :class="['select-data-item cursor-pointer',{active:item.checked} ]"
                 >
                     {{ item.label+"["+item.id +"]" }}
                 </div>
             </div> 
         </div>
        <!-- 中间操作 -->
         <div class="selectCenter">
             <div class="selectBtn add cursor-pointer" @click="add" >
                 <app-icon iconName="vcloud-youjiantou"></app-icon>
             </div>
             <div class="selectBtn remove cursor-pointer" @click="remove">
                 <app-icon iconName="vcloud-zuojiantou"></app-icon>
             </div>
         </div>
        <!-- 右边已选数据 -->
        <div class="selectRight">
            <div class="title">已选</div>
            <div class="selected-dataContent">
                <div 
                v-for="item in rightList" 
                :key="item.id"
                @click="item.checked = !item.checked"
                @dblclick="removeDblclick(item)"
                :class="['select-data-item cursor-pointer',{active:item.checked} ]"
                >
                    {{ item.label+"["+item.id +"]" }}
                </div>
            </div>
        </div>

     </div>


    <div slot="footer" class="dialog-footer">
        <button class="el-button el-button--primary" @click="submit">确 定</button>
        <button class="el-button el-button--info" @click="closeDialog">取 消</button>
    </div>
 </el-dialog>


 </template>



<script>

import { deepCopy } from "@/utils/tool";
export default{
    name:"transfer-dialog",
    components:{},
    props:{},
    data:() =>({
        title:"选择提示",
        isShow:false,

        selectOptions: [{
            label: '一级 1',
            children: [{
                label: '二级 1-1',
                value:"11"
            }]
        }],
        defaultProps: { //指定节点的对应
            label: 'label',
            value: "value",
            children: 'children',
        },
        
        selectTitle:"", //选中的文本
        selectId:"",    //选中的值
        //左侧数据
        leftList:[
            {
                id:"11",
                label:"插件1",
                checked:false
            }],
        //右侧数据
        rightList:[],

    }),
    created(){},
    mounted(){
        this.initHandle();
    },
    watch:{},
    methods:{
        // 组件入口
        open(params){
            this.isShow = true;
            let configData = Object.assign({},params);
            this.title = configData.title;
            this.selectId = configData.selectId;
            this.selectTitle = configData.selectTitle;
            this.selectOptions = configData.selectOptions;
            this.defaultProps = configData.defaultProps;
            this.leftList = configData.leftList||[];
            this.rightList = configData.rightList||[];
        },
        //刷新数据
        refreshData(params){
            let configData = Object.assign({},params);
            configData.title && (this.title = configData.title);
            configData.selectOptions && (this.selectOptions = configData.selectOptions);
            
            if(configData.leftList){
                this.rightList && this.rightList.forEach( cell =>{
                    configData.leftList = configData.leftList.filter(item => cell.id !== item.id);
                });
                this.leftList = configData.leftList
            }
            configData.rightList && (this.rightList = configData.rightList);
        },
        initHandle(){
            //设置一下样式
            this.$nextTick(()=>{
                let scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0]
                let scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar')
                scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;'
                scrollBar.forEach(ele => ele.style.width = 0)
            });
        },
        
        // 清除选中
        clearHandle(){
            this.selectTitle = '';
            this.selectId = null;
            this.clearSelected();
        },
        // 清空选中样式
        clearSelected(){
            let allNode = document.querySelectorAll('#tree-option .el-tree-node')
            allNode.forEach((element)=>element.classList.remove('is-current'))
        },
        // 点击下拉
        handleNodeClick(node){
            console.log(node)
            this.selectTitle = node[this.defaultProps.label];
            this.selectId = node[this.defaultProps.value];
            this.$emit('getSelectData',this.selectId);
            this.$refs.refSelect.blur();//点击下拉，自动隐藏下拉弹出
        },
        //下拉框显示隐藏时
        visibleChange(change){
            
        },
        //执行添加
        add(){
            let listArray = [];
            this.leftList.forEach( (item,index) =>{
                if(item.checked){
                    this.rightList.push(Object.assign({},item,{checked:false}));
                }
            });
            this.leftList= this.leftList.filter( item => !item.checked);
            this.$emit("addData",listArray);
        },
        //双击添加
        addDblclick(item){
            let thatItem = deepCopy(item);
            this.leftList = this.leftList.filter( item => item.id !== thatItem.id );
            this.rightList.push(Object.assign({},thatItem,{checked:false}));
        },
        //执行删除
        remove(){
            this.rightList = this.rightList.filter( item => !item.checked);
            this.$emit("removeData",{id:this.selectId,rightList:this.rightList});
        },
        //双击执行删除
        removeDblclick(item){
            let thatItem = deepCopy(item);
            this.rightList = this.rightList.filter( item => item.id !== thatItem.id );
            this.$emit("removeData",{id:this.selectId,rightList:this.rightList});
        },
        //关闭
        closeDialog(){
            this.isShow = false;
        },
        //确定按钮
        submit(){
            this.$emit("submit",this.rightList);
            this.closeDialog(); 
        }



    }
}



</script>

<style lang="scss" scoped>


.selectContent{
    text-align: center;
    /* 左边容器 */
    .selectLeft,.selectRight{
        width: 275px;
        height:390px;
        display: inline-block;
        vertical-align:top;
        border:1px solid #EAEEF6;
        overflow: hidden;
        text-align: left;
    }
    .selectCenter{
        display: inline-block;
        text-align: center;
        width: 44px;
        height: 390px;
        padding-top: 190px;
        .selectBtn{
            width:32px;
            height:32px;
            line-height:30px;
            text-align:center;
            border-radius:50%;
            background-color:#507FF8;
            color:#fff;
            display: inline-block;
            margin-bottom: 10px;
            &.remove{
                background: rgba(51,108,251,1);
                opacity: 0.12;
            }
        }
    }
    .selectLeft{
        .select-drop{
            height: 39px;
            background-color: #F1F3F7; 
        }
        .el-select{
            width: 95%;
            margin:auto;
            display:block;
            top:4px;
        }
    }
    .selectRight{
        overflow: hidden;
        .title{
           background-color: #F1F3F7; 
           font-size:12px;
           padding:11px;
        }
    }
    .select-dataContent,.selected-dataContent{
        overflow-y: auto;
        height: 351px;
        padding-bottom: 20px;
    }
}


.select-data-item{
    width: 100%;
    height: 30px;
    line-height: 30px;
    color: #333;
    font-size: 12px;
    padding-left: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    &.active{
        background-color: #507FF8;
        color:#fff;
    }
}



  .el-scrollbar .el-scrollbar__view .el-select-dropdown__item{
    height: auto;
    max-height: 274px;
    padding: 0;
    overflow: hidden;
    overflow-y: auto;
  }
  .el-select-dropdown__item.selected{
    font-weight: normal;
  }
  ul li >>>.el-tree .el-tree-node__content{
    height:auto;
    padding: 0 20px;
  }
  .el-tree-node__label{
    font-weight: normal;
  }
  .el-tree >>>.is-current .el-tree-node__label{
    color: #409EFF;
    font-weight: 700;
  }
  .el-tree >>>.is-current .el-tree-node__children .el-tree-node__label{
    color:#606266;
    font-weight: normal;
  }


</style>



